<template>
  <div class="charts_shadow" :style="{width:`${innerWidth *.663}px`}">
    <div class="until_title_charts">天气记录</div>
    <div class="weather_container">
      <div class="weather_item" v-for="(item, index) in weatherList">
        <div class="weather_week">{{item.week}}</div>
        <div class="weather_date">{{item.day}}</div>
        <div class="weather_logo">
          <!--<img :src="`/static/images/weather/a_${item.img}.png`" alt="">-->
          <zz-weather :weatherType="item.imgTitle" font-size="24px"></zz-weather>
        </div>
        <div class="weather_state">
          {{item.imgTitle}}
        </div>
        <div class="weather_temperature">
          {{item.temp}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import mixin from './../mixin'
    import {mapGetters} from 'vuex'
    export default {
      name: 'pano_weather',
      mixins: [mixin],
      data () {
        return {
          weatherList: []
        }
      },
      computed: {
        ...mapGetters({
          currentUser: 'currentUser'
        })
      },
      watch: {
        currentUser () {
          if (this.currentUser.mid) {
            this.getWeatherInfo()
          }
        }
      },
      mounted () {
        this.getWeatherInfo()
      },
      methods: {
        getWeatherInfo () {
          let data = {
            pjId: this.currentUser.pjId,
            stageId: this.currentUser.stageId,
            dateTime: this.currentUser.dateTime
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/panorama/getWeatherInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            if (!res.data.data) return
            this.weatherList = res.data.data
            this.chooseWeek()
          })
        },
        filterWeek (item) {
          switch (item) {
            case '0':
              return '周日'
            case '1':
              return '一'
            case '2':
              return '二'
            case '3':
              return '三'
            case '4':
              return '四'
            case '5':
              return '五'
            case '6':
              return '六'
          }
        },
        chooseWeek () {
          this.weatherList.forEach((item) => {
            item.week = this.filterWeek(item.week)
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  .weather_container {
      display: table;
      height: 80%;
      width: 100%;
    .weather_item {
        display: table-cell;
        text-align: center;
        height: 100%;
        .weather_week {
          font-size:14px;
          font-weight:normal;
          color:rgba(169,197,236,1);
          height: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .weather_date {
          font-size:14px;
          font-weight:normal;
          color:rgba(255,255,255,1);
          // padding-bottom: 10px !important;
          padding-bottom: 0;
          border-bottom: 1px solid rgba(23,90,127,1);
          height: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .weather_logo {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30%;
          // padding-top: 5px !important;
          padding-top: 0;
          img {
            width: 32px;
            height: 31px;
          }
        }
        .weather_state {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size:12px;
          font-weight:normal;
          color:rgba(0,232,255,1);
          height: 15%;
        }
        .weather_temperature {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size:10px;
          font-weight:normal;
          color:rgba(255,255,255,1);
          height: 15%;
        }
      }
  }
</style>
